<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../js/jquery1.11.3.js"></script>
</head>
<!-- 
设置内容 - text()、html() 以及 val()
很多个只会获取一个？
不传value 获取原来text(1或者多） html值（第1个）和  val值（第一个）
传了value是设置值 会把原来的内容或者html取代
传递回调函数 callback(index,originvalue) 一定要return 这样会保留原始值。
 -->

<body>
    <div class="demo">123</div>
    <div class="demo">aaa</div>
    <div class="demo1">
        <span>456</span>

    </div>
    <div class="demo1">
        <span>789</span>
    </div>

    <!-- jq函数大部分第一个参数是index -->
    <script>
        $(function () {
            // 不传value 获取html和text
            let txt = $('#demo').text()
            let html = $('#demo1').html()
            // console.log(txt,html) 
            //传了value是设置值 会把原来的内容或者html取代
            // $('.demo').text('i am new text')
            // $('#demo1').html(`<button>new button</button>`)


            // 传递回调函数 callback(index,originvalue) 一定要return 这样会保留原始值。
            $('.demo').text((index, oldVal) => {
                console.log(index, oldVal) //0 "123"  1 "aaa"
                return `原始文本是${oldVal} 新文本是i am newtext ${index}`
            })
            // 一行代码可以省return 自动返回return 
            $('.demo1').html((index, oldVal) => `<button>${oldVal}newtext</button>`)
        })

    </script>
</body>

</html>